<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getStatement } from '@/api/customer'

const timeSpan = ref([])
const changeDate = () => {
  // console.log(timeSpan.value)
  getTableData(timeSpan.value)
}

const tableData = ref()
const getTableData = async (dateArr = []) => {
  try {
    tableData.value = await getStatement({ dateArr })
    // console.log(tableData.value)
  } catch (error) {
    ElMessage.error((error as Error).message)
  }
}

onMounted(async () => {
  await getTableData()
})

</script>
<template>
  <el-card shadow="Never">
      <span class="demonstration">请选择查看计划日期</span>
        <el-date-picker
          v-model="timeSpan"
          type="daterange"
          range-separator="到"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="changeDate"
        />
  </el-card>
  <el-card shadow="Never" class="plan-table">
    <el-table :data="tableData" height="500" stripe style="width: 100%">
      <el-table-column type="index" width="50" />
      <el-table-column prop="productCoding" label="简码" width="120" />
      <el-table-column prop="productsName" label="品名"/>
      <el-table-column prop="amount" label="月报" width="100"/>
    </el-table>
  </el-card>
</template>

<style lang="scss" scoped>
.demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.plan-table {
  margin-top: 10px;
}
</style>
